<template>
  <uni-transition :mode-class="['fade']" class="mask" :show="true" @click="beClick">
<!--    <template-->
<!--      v-if="scaleShow">-->
<!--      <movable-area class="movable-area">-->
<!--        <movable-view-->
<!--          class="movable-view"-->
<!--          direction="all"-->
<!--          :scale="true"-->
<!--          scale-min="1"-->
<!--          scale-max="4"-->
<!--          :scale-value="1">-->
<!--          <scroll-view-->
<!--            class='images w100 h100'-->
<!--            :scroll-y="true"-->
<!--            :scroll-x="true">-->
<!--            <image-->
<!--              class="w100 h100"-->
<!--              :src="src"-->
<!--              :lazy-load="true"-->
<!--              mode="aspectFill"-->
<!--              :style="'width:'+scaleWidth+'rpx;height:'+scaleHeight+'rpx'"-->
<!--              @load="imgload">-->
<!--            >-->
<!--            </image>-->
<!--          </scroll-view>-->
<!--        </movable-view>-->
<!--      </movable-area>-->
<!--    </template>-->
    <!--      //direction movable-view的移动方向，属性值有all、vertical、horizontal、none-->
    <!--      //scale  是否支持双指缩放，默认缩放手势生效区域是在movable-view内-->
    <!--      //scale-min 定义缩放倍数最小值-->
    <!--      //scale-max 定义缩放倍数最大值-->
    <!--      //scale-value 定义缩放倍数，取值范围为 0.5 - 10   默认是1-->
    <scroll-view
      v-if="scaleShow"
      class='images w100 h100'
      :scroll-y="true"
      :scroll-x="true"
      @touchmove="touchmoveCallback"
      @touchstart="touchstartCallback">
      <image
        mode="aspectFit"
        :lazy-load="true"
        :src="src"
        :style="'width:'+scaleWidth+'rpx;height:'+scaleHeight+'rpx'"
        @load="imgload">
      </image>
    </scroll-view>
    <c-image
      v-else
      class="big-img"
      :src="src"
      mode="aspectFit">
    </c-image>
  </uni-transition>
</template>

<script>
import uniTransition from './uni-ui/uni-transition/uni-transition';

export default {
  name: 'c-image-preview',
  components: {
    uniTransition,
  },
  props: {
    src: {
      type: String,
      default: '',
    },
    // 是否可手指滑动缩放
    scaleShow: {
      type: Boolean,
      default: false,
    },
  },
  data(){
    return {
      width: 750,
      distance: 0, // 手指移动的距离
      scale: 1, // 缩放比例
      baseWidth: '', // 图片实际宽度
      baseHeight: '', // 图片实际高度
      initWidth: '', // 图片默认显示宽度
      initHeight: '', // 图片默认显示高度
      scaleWidth: '', // 图片缩放后的宽度
      scaleHeight: '', // 图片缩放后的高度
    }
  },
  onLoad: function (options) {
    // 获取屏幕宽度
    this.width = uni.getSystemInfoSync().windowWidth;
  },
  methods: {
    beClick() {
      this.$emit('click');
    },
    /**
     * 监听图片加载成功时触发
     */
    imgload: function (e) {
      const vm = this
      uni.showLoading({
        title: '加载中...',
      })
      const widthBase = 750
      const heightBase = this.multiply(e.detail.height,this.divide(750,e.detail.width))
      this.multiple = widthBase / this.width; // 计算原图和默认显示的倍数
      let height = this.multiple > 1 ? heightBase / this.multiple : heightBase; // 等比例计算出默认高度
      let width = this.multiple > 1 ? this.width : widthBase;
      vm.baseWidth = widthBase // 获取图片实际宽度
      vm.baseHeight = heightBase // 获取图片实际高度
      vm.initWidth = width
      vm.initHeight = height
      vm.scaleWidth = width
      vm.scaleHeight = height
      uni.hideLoading()
    },
    /**
     * 双手指触发开始 计算开始触发两个手指坐标的距离
     */
    touchstartCallback: function (e) {
      // 单手指缩放开始，不做任何处理
      if (e.touches.length == 1) return;
      let distance = this.calcDistance(e.touches[0], e.touches[1]);
      this.distance = distance
    },
    /**
     * 双手指移动   计算两个手指坐标和距离
     */
    touchmoveCallback: async function (e) {
      await this.sleep(50)
      // 单手指缩放不做任何操作
      if (e.touches.length == 1) return;
      let distance = this.calcDistance(e.touches[0], e.touches[1]);
      // 计算移动的过程中实际移动了多少的距离
      let distanceDiff = distance - this.distance;
      let newScale = this.scale + 0.005 * distanceDiff;

      if (newScale >= this.multiple && this.multiple > 2) { // 原图比较大情况
        newScale = this.multiple;
      } else if (this.multiple < 2 && newScale >= 2) { // 原图较小情况
        newScale = 2; // 最大2倍
      };
      // 最小缩放到1
      if (newScale <= 1) {
        newScale = 1;
      };

      let scaleWidth = newScale * this.initWidth;
      let scaleHeight = newScale * this.initHeight;
      const vm = this
      vm.distance = distance
      vm.scale = newScale
      vm.scaleWidth = scaleWidth
      vm.scaleHeight = scaleHeight
      vm.diff = distanceDiff
    },
    /**
     * 计算两个手指距离
     */
    calcDistance(pos0, pos1) {
      let xMove = pos1.clientX - pos0.clientX;
      let yMove = pos1.clientY - pos0.clientY;
      return (Math.sqrt(xMove * xMove + yMove * yMove));
    },

  },
};
</script>

<style lang="less" scoped>
.mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 1);
  z-index: 999;
}

.big-img {
  width: 100vw;
  height: 100vh;
  display: block;
  overflow: hidden;
}

.images{
  width: 100vw;
  height: 100vh;
  display: block;
}

.movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height:100%;
}
.movable-area {
  height: 100%;
  width: 100%;
  position:fixed;
  overflow: hidden;
}
.movable-view image{
  width:100%;
}
</style>
